<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,adress=no"/>
    <title>一汽凌河</title>
    <script src="js/rem.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/modal.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/modal.css">
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?093769dff122ad4e9889c72ad532cc41";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
        </div>
        <div class="middle">
            <ul class="m1">
                <li>
                    <a href="javascript:void(0);" class="title"><span class="sTxt">活动礼品</span><span class="sImg"><img
                            src="images/ic_triangle_down.png"></span></a>

                    <div class="body">
                        <div class="bodyCard">
                            <div class="cardLeft"><img src="images/img_card_1.png"></div>
                            <div class="cardRight">价值30元的手机话费充值卡一张</div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="javascript:void(0);" class="title"><span class="sTxt">活动流程</span><span class="sImg"><img
                            src="images/ic_triangle_down.png"></span></a>
                    <div class="body">
                        <div class="bodyContent">
                            为了确保参与者身份信息真实有效，请在当前页面下方进行身份验证，需要您提供本人的手机号码及行驶证，请尽量保证图片的有效信息清晰，避免审核失败。成功提交后，我们的工作人员会在次日（遇节假日顺延）完成审核并联系您兑换礼品，请您保持电话畅通。
                        </div>
                        <div class="bodyRemarks">
                            * 本次活动礼品均由一汽凌河沪尊S200提供，无需您支付任何其他费用。
                        </div>
                        <div class="bodyRemarks">
                            * 本活动仅限卡车司机参与。
                        </div>
                    </div>
                </li>
            </ul>
            <div class="m2">活动时间：2020年07月15日~07月21日</div>
            <div class="m3">
                <div class="title">身份验证</div>
            </div>
            <ul class="m4">
                <li class="iptPhone">
                    <span class="sIc">
                        <img src="images/ic_phone.png">
                    </span>
                    <input id="phoneNum" class="ipt" placeholder="请输入电话号码" type="tel">
                </li>
                <li class="iptCode">
                    <span class="sIc">
                        <img src="images/ic_verification.png">
                    </span>
                    <input class="ipt " placeholder="验证码" type="tel" id="sendCode" maxlength="6">
                    <button id="codeBtn" class="code">获取验证码</button>
                </li>
            </ul>

            <div class="m5">
                <form id="addUpload" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="uploadPath" id="uUploadPath" value="">
                    <input id="adviceImg" name="file" type="file" captrure="camera" accept="image/*">


                    <span class="sImg"><img id="upLoadImg" src="images/ic_driving_card.png"></span>
                    <span id="adviceSTxt" class="sTxt">上传行驶证</span>
                </form>
            </div>
            <input type="hidden" id="pictureUrl">
            <a id="submitBtn" href="javascript:void(0);" class="submitBtn">提交</a>
        </div>
    </div>
</div>
<!-- 引入 极验官方gt.js，使用其中提供的 initGeetest 初始化函数 -->
<script src="https://static.geetest.com/static/tools/gt.js"></script>

<script>
    var handler = function (captchaObj) {
        captchaObj.onReady(function () {
            $("#wait").hide();
        }).onSuccess(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                return alert('请完成验证');
            }
            $.ajax({
                url: 'http://linghe.longwisedata.com/tbl/secondCode',
                type: 'POST',
                dataType: 'json',
                data: {
                    phone: $('#phoneNum').val(),
                    geetest_challenge: result.geetest_challenge,
                    geetest_validate: result.geetest_validate,
                    geetest_seccode: result.geetest_seccode
                },
                success: function (data) {
                    console.log(data);
                    if (data.result === 'success') {
                        /*参数 1 jquery对象 点击的倒计时按钮*/
                        /*参数 2 jquery对象 获取电话号码的dom*/
                        /*参数 3 倒计时时间，数字，单位秒*/
                        /*参数 el jquery对象 点击的倒计时按钮*/
                        document.getElementById("sendCode").focus();
                        countdownHandle($('#codeBtn'), $('#phoneNum'), 60);
                    } else if (data.result === 'fail') {
                        var phoneModaL = new mModal({
                            title: "一汽凌河",
                            content: data.msg,
                            width: "80%",
                            showCancelButton: false,
                            confirm: function () {
                                phoneModaL.close();
                            },
                            cancel: function () {
                                phoneModaL.close();
                            }
                        });
                        phoneModaL.renderDom();
                        captchaObj.reset();
                    }
                }
            });
        });

        $('#codeBtn').click(function () {

            // 调用之前先通过前端表单校验
            /*参数 phone jquery对象 获取电话号码的dom*/
            /*参数 time 倒计时时间，数字，单位秒*/
            var phoneNum = $('#phoneNum').val();//手机号码
            var reg_phone = /1\d{10}/;
            if (!reg_phone.test(phoneNum)) {   //验证手机是否符合格式
                var phoneModaL = new mModal({
                    title: "一汽凌河",
                    content: "请正确填写手机号",
                    width: "80%",
                    showCancelButton: false,
                    confirm: function () {
                        phoneModaL.close();
                    },
                    cancel: function () {
                        phoneModaL.close();
                    }
                });
                phoneModaL.renderDom();
                return false;
            }
            captchaObj.verify();

        });
        // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
    };


    $.ajax({
        url: "http://linghe.longwisedata.com/tbl/initCode?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {

            // 调用 initGeetest 进行初始化
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                product: "bind", // 产品形式，包括：float，popup
                width: "300px",
                https: true

                // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
            }, handler);
        }
    });


    //倒计时工具方法
    function countdownHandle(el, phone, time) {
        /*参数 el jquery对象 点击的倒计时按钮*/
        /*参数 phone jquery对象 获取电话号码的dom*/
        /*参数 time 倒计时时间，数字，单位秒*/
        var phoneNum = phone.val();//手机号码
        var reg_phone = /1\d{10}/;
        if (!reg_phone.test(phoneNum)) {   //验证手机是否符合格式
            alert('请正确填写手机号');
            return false;
        }

        /*服务端获取验证码*/
        //开始计时
        el.attr('disabled', 'disabled');//禁用按钮
        el.html(time + '秒后重新发送');
        var timer = setInterval(function () {
            time--;
            el.html(time + '秒后重新发送');
            if (time === 0) {
                clearInterval(timer);
                el.attr('disabled', false);//启用按钮
                el.html('重新发送验证码');
                code = '';//清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
            }
        }, 1000);
    }


    /*点击展开收起效果*/
    $('.title').on('click', function () {
        var title = $(this);
        var body = $(this).siblings('.body');

        if (title.hasClass('active')) {
            title.removeClass('active');
            body.stop(true).slideUp(200);
        } else {
            title.addClass('active');
            body.stop(true).slideDown(200);
        }
    });

    $('#adviceImg').on('change', function () {
        var upload = document.getElementById('adviceImg');
        var file = upload.files[0];

        if (file.name === '') {
            var phoneModaL = new mModal({
                title: "一汽凌河",
                content: "请选择图片",
                width: "80%",
                showCancelButton: false,
                confirm: function () {
                    phoneModaL.close();
                },
                cancel: function () {
                    phoneModaL.close();
                }
            });
            phoneModaL.renderDom();
            return false;
        }

        var fileName = file.name.toLowerCase();//fileName 文件名 用来判断格式
        var fileSize = file.size;//fileSize 图片大小 单位kb
        var imgStr = /\.(jpg|jpeg|JPG|JPEG|png|PNG)$/;//正则 支持的的图片格式
        console.log(fileSize);
        if (!imgStr.test(fileName)) {
            var phoneModaL = new mModal({
                title: "一汽凌河",
                content: "请上传JPG,PNG格式的图片",
                width: "80%",
                showCancelButton: false,
                confirm: function () {
                    phoneModaL.close();
                },
                cancel: function () {
                    phoneModaL.close();
                }
            });
            phoneModaL.renderDom();
            return false;
        } else if (fileSize > (10 * 1024 * 1024)) {
            var phoneModaL = new mModal({
                title: "一汽凌河",
                content: "文件大小不能超过10MB",
                width: "80%",
                showCancelButton: false,
                confirm: function () {
                    phoneModaL.close();
                },
                cancel: function () {
                    phoneModaL.close();
                }
            });
            phoneModaL.renderDom();
            return false;
        } else {
            $("#uUploadPath").val("yqlh");

            var data = new FormData($('#addUpload')[0]);
            $.ajax({
                type: "POST",
                url: "http://jfad.longwisedata.com/integral_mall_ad_api/upload",
                data: data,// 你的数据
                contentType: false,
                processData: false,
                error: function (request) {
                    console.log("上传错误");
                },
                success: function (data) {
                    console.log(data)
                    $("#pictureUrl").val(data.url);
                    $('#upLoadImg').attr('src', data.url);
                    $('#adviceSTxt').text('重新上传');
                }
            });


        }

    });


    $('#submitBtn').on('click', function () {
        /*提交按钮*/
        console.log('提交内容到服务器');
        var phoneNum = $("#phoneNum").val();
        var sendCode = $("#sendCode").val();
        var picture = $("#pictureUrl").val();
        if (phoneNum == '') {
            var phoneModaL = new mModal({
                title: "一汽凌河",
                content: "请输入手机号",
                width: "80%",
                showCancelButton: false,
                confirm: function () {
                    phoneModaL.close();
                },
                cancel: function () {
                    phoneModaL.close();
                }
            });
            phoneModaL.renderDom();
            return false;
        }

        if (sendCode == '') {
            var phoneModaL = new mModal({
                title: "一汽凌河",
                content: "请输入验证码",
                width: "80%",
                showCancelButton: false,
                confirm: function () {
                    phoneModaL.close();
                },
                cancel: function () {
                    phoneModaL.close();
                }
            });
            phoneModaL.renderDom();
            return false;
        }

        if (picture == '') {
            var phoneModaL = new mModal({
                title: "一汽凌河",
                content: "请上传行驶证",
                width: "80%",
                showCancelButton: false,
                confirm: function () {
                    phoneModaL.close();
                },
                cancel: function () {
                    phoneModaL.close();
                }
            });
            phoneModaL.renderDom();
            return false;
        }

        $.ajax({
            url: "http://linghe.longwisedata.com/tbl/save?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "post",
            data: {phone: phoneNum, sendCode: sendCode, picture: picture},
            dataType: "json",
            success: function (data) {
                if (data.result == 0) {
                    window.location.href = "success.html";
                } else {
                    var phoneModaL = new mModal({
                        title: "一汽凌河",
                        content: data.msg,
                        width: "80%",
                        showCancelButton: false,
                        confirm: function () {
                            phoneModaL.close();
                        },
                        cancel: function () {
                            phoneModaL.close();
                        }
                    });
                    phoneModaL.renderDom();
                }
            }
        });
    });


</script>
</body>
</html>
